﻿<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="index.aspx.cs" Inherits="EazyBPMS.Web.index.index"%>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/>
    <title>宜兴市城区排水调度平台</title>
    <link rel="stylesheet" href="css/index.css"/>
    <script type="text/javascript" src="js/map.js"></script>
    <script type="text/javascript" src="js/datatable.js"></script>
    <script src="js/jquery-1.11.2.min.js"></script>
    <script src="js/echarts.js"></script>
    <script src="js/myecharts.js"></script>
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=fyLEettTPlnZofb2nqdAFkNYOVnU9YPE"></script> 
    <style type="text/css">
        body, html, #allmap {
            width: 100%;
            height: 100%;
            overflow: hidden;
            margin: 0;
            font-family: "微软雅黑";
        }

        #up-map-div {
            top: 16%;
            left: 80%;
            position: absolute;
            z-index: 9999;
            border: 1px solid blue;
            background-color: #FFFFFF;
        }
    </style>
</head>
<body style="background-color:#050a2a">
    <div class="grandpa1">
        <div class="father1" id="" style="background-image:url(img/dpl.png);background-position:center 50%;">
        </div>
        <div class="father11">
            <table style="width:100%;height:100%;">
                <tr style="width:100%;"><td style="text-align:center;font-size:20px;color:#2976ef" colspan="2">雨情</td><td></td></tr>
                <tr style="text-align:center;font-size:15px;color:#2976ef;"><td>泵坑</td><td>雨量</td></tr>
                <tr style="text-align:center;font-size:15px;color:#2976ef;background-color:#8bb6f8;opacity:0.8;"><td>广汇南路</td><td>0</td></tr>
                <tr style="text-align:center;font-size:15px;color:#2976ef;background-color:#8bb6f8;opacity:0.8;"><td>尚武河</td><td>0</td></tr>
                <tr style="text-align:center;font-size:15px;color:#2976ef;background-color:#8bb6f8;opacity:0.8;"><td>中心湖滨城</td><td>0</td></tr>
            </table>
        </div>
        <div class="father12" id="">
            <table style="width:100%;height:100%;">
                <tr style="width:100%;"><td style="text-align:center;font-size:20px;color:#2976ef" colspan="2">液位</td><td></td></tr>
                <tr style="text-align:center;font-size:15px;color:#2976ef;"><td>泵坑</td><td>雨量</td></tr>
                <tr style="text-align:center;font-size:15px;color:#2976ef;background-color:#8bb6f8;opacity:0.8;"><td>广汇南路</td><td>0</td></tr>
                <tr style="text-align:center;font-size:15px;color:#2976ef;background-color:#8bb6f8;opacity:0.8;"><td>尚武河</td><td>0</td></tr>
                <tr style="text-align:center;font-size:15px;color:#2976ef;background-color:#8bb6f8;opacity:0.8;"><td>中心湖滨城</td><td>0</td></tr>
            </table>
        </div>
        <div class="father13" id="">
            <table style="width:100%;height:100%;">
                <tr style="width:100%;"><td style="text-align:center;font-size:20px;color:#2976ef" colspan="2">流量分析</td><td></td></tr>
                <tr style="text-align:center;font-size:15px;color:#2976ef;"><td colspan="2"><div id=""></div></td></tr>
                <tr style="text-align:center;font-size:15px;color:#2976ef;"><td colspan="2"><div id=""></div></td></tr>
                <tr style="text-align:center;font-size:15px;color:#2976ef;"><td colspan="2"><div id=""></div></td></tr>
                <tr style="text-align:center;font-size:15px;color:#2976ef;"><td colspan="2"><div id=""></div></td></tr>
            </table>
                <div class="father131" id="llfx"></div>
        </div>
    </div>
    <div class="grandpa2" id="">
        <div class="father21" id="" style="text-align:center;">
           <span style="font-size:45px;color:#8dc2e4;">宜兴市城区排水调度平台</span>
        </div>
        <div class="father22" id="allmap">
        </div>
            <div id="up-map-div"><input type="button" value="防汛"  style="background:#2976ef" onclick="tomap2()"/></div>
    </div>
    <div class="grandpa3">
        <div class="father3" id="" style="background-image:url(img/dpr.png);background-position:center 50%;">
        <!--<a href="#" onClick="fullscreen()">全屏</a>&nbsp;|&nbsp;<a href="#" onClick="exitFullscreen()">关闭</a>
        <p id="state">no</p>-->
        </div>
        <div class="father31" id="">
            <table style="width:100%;height:100%;">
                <tr style="width:100%;"><td style="text-align:center;font-size:20px;color:#2976ef" colspan="2">能耗监控</td><td></td></tr>
                <tr style="text-align:center;font-size:15px;color:#2976ef;"><td colspan="2"></td></tr>
                <tr style="text-align:center;font-size:15px;color:#2976ef;"><td colspan="2"><div id=""></div></td></tr>
                <tr style="text-align:center;font-size:15px;color:#2976ef;"><td colspan="2"><div id=""></div></td></tr>
                <tr style="text-align:center;font-size:15px;color:#2976ef;"><td colspan="2"><div id=""></div></td></tr>

            </table>
                <div class="father311" id="nh"></div>
        </div>
        <div class="father32" id="">
            <table style="width:100%;height:100%;">
                <tr style="width:100%;"><td style="text-align:center;font-size:20px;color:#2976ef" colspan="2">运行监控</td><td></td></tr>
                <tr style="text-align:center;font-size:15px;color:#2976ef;"><td>
                    液位超限：</td><td><progress max="100" value="0"></progress></td><td>0%</td></tr>
                <tr style="text-align:center;font-size:15px;color:#2976ef;"><td>
                    雨量超限：</td><td><progress max="100" value="0"></progress></td><td>0%</td></tr>
                <tr style="text-align:center;font-size:15px;color:#2976ef;"><td>
                    能耗告警：</td><td><progress max="100" value="0"></progress></td><td>0%</td></tr>
                <tr style="text-align:center;font-size:15px;color:#2976ef;"><td>
                    故障告警：</td><td><progress max="100" value="100"></progress></td><td>100%</td></tr>
                <tr style="text-align:center;font-size:15px;color:#2976ef;"><td colspan="3">
                    站点运行正常：0个，异常：64个</td></tr>
            </table>
        </div>
        <div class="father33" id="">
            
            <table style="width:100%;height:100%;">
                <tr style="width:100%;"><td style="text-align:center;font-size:20px;color:#2976ef" colspan="2">河道视频监控</td><td></td></tr>
                <tr style="text-align:center;font-size:15px;color:#2976ef;"><td colspan="2">未接入</td></tr>
                <tr style="text-align:center;font-size:15px;color:#2976ef;"><td colspan="2"><div id=""></div></td></tr>
                <tr style="text-align:center;font-size:15px;color:#2976ef;"><td colspan="2"><div id=""></div></td></tr>
                <tr style="text-align:center;font-size:15px;color:#2976ef;"><td colspan="2"><div id=""></div></td></tr>

            </table>
        </div>
    </div>

        <script>
            function tomap2() {
                window.location.href = "http://192.168.192.109:8080/floodPrevention/";
            }
        //创建和初始化地图函数：
        function initMap() {
            createMap();//创建地图
            setMapEvent();//设置地图事件
            addMapControl();//向地图添加控件
        }
        //创建地图函数：
        function createMap() {
            var map = new BMap.Map("allmap"); //在百度地图容器中创建一个地图
            var point = new BMap.Point(119.805735, 31.3733); //定义一个中心点坐标
            map.centerAndZoom(point, 11.8); //设定地图的中心点和坐标并将地图显示在地图容器中
            //map.centerAndZoom(new BMap.Point(116.403765, 39.914850), 7);
            map.enableScrollWheelZoom();
            window.map = map; //将map变量存储在全局
            //取消兴趣点
            var myStyleJson = [
          {
              "featureType": "background",
              "elementType": "all",
              "stylers": {
                  "color": "#050a2a",
                  "hue": "#0b5394"
              }
          }, {
              "featureType": "road",
              "elementType": "geometry.stroke",
              "stylers": {
                              "visibility": "off"
                          }
          },
          {
              "featureType": "poilabel",
              "elementType": "geometry.stroke",
              "stylers": {
                  "visibility": "off"
              }
          }, {
              "featureType": "poi",
              "elementType": "labels",
              "stylers": {
                  "visibility": "off"
              }
          },
          {
              "featureType": "label",
              "elementType": "labels.text.fill",
              "stylers": {
                  "visibility": "off"
              }
          }
            ];
            try{
                map.setMapStyle({
                    styleJson: myStyleJson
                });
            }catch(e)
            { }
            var opts = { offset: new BMap.Size(100, 10), mapTypes: [BMAP_NORMAL_MAP,BMAP_SATELLITE_MAP] };
            map.addControl(new BMap.MapTypeControl(opts));
            map.setMapType(BMAP_NORMAL_MAP);
            map.clearOverlays();
            //getBoundary();
            paint();
            //map.addControl(new BMap.MapTypeControl()); //添加地图类型控件
            //map.addEventListener("click", function (e) {
            //    //console.log(e.point.lng + "," + e.point.lat);
            //    console.log(e);
            //});
        }
        //地图事件设置函数：
        function setMapEvent() {
            map.enableDragging();//启用地图拖拽事件，默认启用(可不写)
            map.enableScrollWheelZoom();//启用地图滚轮放大缩小
            map.enableDoubleClickZoom();//启用鼠标双击放大，默认启用(可不写)
            map.enableKeyboard();//启用键盘上下左右键移动地图
        }
        //地图控件添加函数：
        function addMapControl() {
            //向地图中添加缩放控件
            var ctrl_nav = new BMap.NavigationControl({ anchor: BMAP_ANCHOR_TOP_LEFT, type: BMAP_NAVIGATION_CONTROL_LARGE });
            map.addControl(ctrl_nav);
            //向地图中添加缩略图控件
            var ctrl_ove = new BMap.OverviewMapControl({ anchor: BMAP_ANCHOR_BOTTOM_RIGHT, isOpen: 1 });
            map.addControl(ctrl_ove);
            //向地图中添加比例尺控件
            var ctrl_sca = new BMap.ScaleControl({ anchor: BMAP_ANCHOR_BOTTOM_LEFT });
            map.addControl(ctrl_sca);
        }
        initMap();//创建和初始化地图
    </script>
    <script>
        var myChart = echarts.init(document.getElementById('llfx'));
        chart1();
        function chart1() {
            option = {
                title: {
                    text: ''
                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'cross',
                        label: {
                            backgroundColor: '#2976ef'
                        }
                    }
                },
                legend: {
                    data: ['今日流量', '昨日流量']
                },
                toolbox: {
                    feature: {
                        saveAsImage: {}
                    }
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis: [
                    {
                        type: 'category',
                        boundaryGap: false,
                        data: ['3', '6', '9', '12', '15', '18', '21','24']
                    }
                ],
                yAxis: [
                    {
                        type: 'value'
                    }
                ],
                series: [
                    {
                        name: '今日流量',
                        type: 'line',
                        areaStyle: { normal: {} },
                        data: [760, 823, 1330, 1263, 1250, 1320, 833, 733]
                    },
                    {
                        name: '昨日流量',
                        type: 'line',
                        areaStyle: { normal: {} },
                        data: [820, 932, 1320, 1330, 1290, 1330, 953, 685]
                    }
                ]
            };
            myChart.setOption(option);
        }
    </script>

    
    <script>
        var myChart2 = echarts.init(document.getElementById('nh'));
        option2 = {
            title: {
                text: ''
            },
            xAxis: {
                type: 'category',
                data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
            },
            yAxis: {
                type: 'value'
            },
            series: [{
                data: [820, 932, 901, 934, 1290, 1330, 1320],
                type: 'line',
                smooth: true
            }]
        };
        myChart2.setOption(option2);
    </script>

    <script>
        var pg = document.getElementById('pg');
        setInterval(function (e) {
            if (pg.value != 100) pg.value++;
            else pg.value = 0;
        }, 100);
    </script>
</body>
</html>
